window.Page = {
  props: {
    pageInfo: {
      type: Object,
      required: true
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const gotoPage = Vue.ref(props.pageInfo.current_page || 1);
    const totalPages = Vue.computed(() => props.pageInfo.total_pages || 1);
    const visiblePages = Vue.computed(() => {
      let pages = [];
      let total = totalPages.value;
      let cur = props.pageInfo.current_page;
      if (total <= 7) {
        for (let i = 1; i <= total; i++) pages.push(i);
      } else {
        if (cur <= 4) {
          pages = [1,2,3,4,5,'...',total];
        } else if (cur >= total - 3) {
          pages = [1,'...',total-4,total-3,total-2,total-1,total];
        } else {
          pages = [1,'...',cur-1,cur,cur+1,'...',total];
        }
      }
      return pages;
    });
    function changePage(page) {
      if (typeof page === 'string') return;
      if (page >= 1 && page <= totalPages.value) {
        emit('change', { ...props.pageInfo, current_page: page });
        gotoPage.value = page;
      }
    }
    function changePageSize(e) {
      emit('change', { ...props.pageInfo, page_size: Number(e.target.value), current_page: 1 });
      gotoPage.value = 1;
    }
    function jumpToPage() {
      if (gotoPage.value >= 1 && gotoPage.value <= totalPages.value) {
        emit('change', { ...props.pageInfo, current_page: gotoPage.value });
      }
    }
    Vue.watch(() => props.pageInfo.current_page, (val) => {
      gotoPage.value = val;
    });
    return {
      gotoPage,
      totalPages,
      visiblePages,
      changePage,
      changePageSize,
      jumpToPage
    };
  },
  template: `
    <div class="d-flex justify-content-end align-items-center mt-3 flex-wrap">
      <div class="d-flex align-items-center pagination-bar">
        <span class="text-secondary small">共 {{ pageInfo.total }} 条</span>
        <select :value="pageInfo.page_size" class="form-select form-select-sm w-auto mx-1 me-3"
                style="min-width: 80px;white-space:nowrap;"
                @change="changePageSize">
          <option :value="5">5条/页</option>
          <option :value="10">10条/页</option>
        </select>
        <ul class="pagination pagination-sm mb-0 align-items-center">
          <li class="page-item" :class="{disabled: pageInfo.current_page === 1}">
            <a class="page-link" href="#" @click.prevent="changePage(pageInfo.current_page-1)">&lt;</a>
          </li>
          <li class="page-item" v-for="page in visiblePages" :key="page"
              :class="{active: pageInfo.current_page === page, disabled: page === '...'}">
            <a v-if="page !== '...'" class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
            <span v-else class="page-link">...</span>
          </li>
          <li class="page-item" :class="{disabled: pageInfo.current_page === totalPages}">
            <a class="page-link" href="#" @click.prevent="changePage(pageInfo.current_page+1)">&gt;</a>
          </li>
        </ul>
        <span class="ms-2 small">前往</span>
        <input type="number" min="1" :max="totalPages" v-model.number="gotoPage" @keyup.enter="jumpToPage"
               class="form-control form-control-sm d-inline-block mx-1" style="width:50px;">
        <span class="small">页</span>
        <button class="btn btn-outline-secondary btn-sm ms-1" @click="jumpToPage">跳转</button>
      </div>
    </div>
  `
}; 